import './index.scss'

import PropTypes from 'prop-types'
import { useEffect, useState } from 'react'
import { useMount } from 'ahooks'
import { Tabs, Tooltip, Popconfirm, App } from 'antd'
import { MenuFoldOutlined, MenuUnfoldOutlined, CloseOutlined } from '@ant-design/icons'

import { findValue } from '../../Utils/Common'
import { GetIndexedDB } from '../../Utils/IndexedDB'
import AdminHtmlTemp from '../../Template/AdminHtmlTemp'
import AdminTableTemp from '../../Template/AdminTableTemp'
import { AdminHomeA01 } from '../../Template/AdminHome'

const defaultTabs = [
    { key: 'a0b4f6b8-ef44-4b43-925f-85a299eb52cb', label: '首页', closable: false, children: <AdminHomeA01 /> }
]

const generateTabs = ({ tableName: label, pageType, targetUrl: url }, key) => {
    switch (pageType) {
        case '9144691c-a87d-40e5-9a33-946fb0bcfc6c':
            return { label, key, url, children: <AdminTableTemp url={url} uuid={key} title={label} /> }
        case '7a06b22f-5c9e-43a3-9075-6b64c47379dc':
            return { label, key, url, children: <AdminHtmlTemp url={url} uuid={key} title={label} /> }
        default: return <div>组件开发中...</div>
    }
}

const PageA01 = ({ MenuEvent, OpenStatus, OpenEvent }) => {
    PageA01.propTypes = {
        MenuEvent: PropTypes.object,
        OpenEvent: PropTypes.object,
        OpenStatus: PropTypes.bool
    }

    const { message } = App.useApp()
    const [Menu, setMenu] = useState()
    const [Theme, setTheme] = useState()
    const [Open, setOpen] = useState(OpenStatus)

    const [TabsList, setTabsList] = useState(defaultTabs)
    const [active, setActive] = useState('a0b4f6b8-ef44-4b43-925f-85a299eb52cb')

    const close = e => {
        if (e === active) MenuEvent.emit(TabsList[TabsList.findIndex(v => v.key === e) - 1].key)
        setTabsList(TabsList.filter(v => v.key !== e))
    }

    const closeAll = () => {
        MenuEvent.emit('a0b4f6b8-ef44-4b43-925f-85a299eb52cb')
        setTabsList(defaultTabs)
        message.info('菜单已全部关闭')
    }
    OpenEvent.useSubscription(() => setOpen(!Open))

    const tableNav = {
        left: (
            <div className="tableNavBtn" onClick={() => OpenEvent.emit()}>
                {Open ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </div>
        ),
        right: (
            <>
                {TabsList && TabsList.length > 1 && (
                    <>
                        <Tooltip title="全部关闭">
                            <Popconfirm
                                title="是否要关闭所有打开的页面?"
                                placement="bottomRight"
                                onConfirm={closeAll}
                                okText="关闭"
                                cancelText="取消"
                            >
                                <CloseOutlined className="tableNavBtn Right" />
                            </Popconfirm>
                        </Tooltip>
                    </>
                )}
            </>
        ),
    }

    MenuEvent.useSubscription(val => {
        if (TabsList.findIndex(v => v.key === val) === -1)
            setTabsList([...TabsList, generateTabs(findValue(Menu, val), val)])
        sessionStorage.setItem('openKey', val)
        setActive(val)
    })

    useMount(async () => {
        const { PageSet } = await GetIndexedDB('theme')
        const Menu = await GetIndexedDB('menu')
        setMenu(Menu)
        setTheme(PageSet)
    })
    useEffect(() => { if (Menu) sessionStorage.getItem('openKey') && MenuEvent.emit(sessionStorage.getItem('openKey')) }, [Menu, MenuEvent])
    if (Theme) {
        const {
            blurState,
            blurColor,
            blurFilter,
            blurRadius,
            iconSize,
            iconColor,

        } = Theme
        return (
            <div
                className="pageTemplate PageA01"
                style={{
                    '--blurColor': blurColor,
                    '--blurFilter': blurFilter,
                    '--blurRadius': blurRadius,
                    '--iconSize': iconSize,
                    '--iconColor': iconColor,
                }}
            >
                {blurState && <div className='mask' />}
                <Tabs
                    hideAdd
                    type="editable-card"
                    tabBarExtraContent={tableNav}
                    activeKey={active}
                    onChange={e => MenuEvent.emit(e)}
                    onEdit={close}
                    items={TabsList}
                />
            </div>
        )
    }
};

export default PageA01;